<!DOCTYPE html>
<html>
	<head>
		<title>库存调拨-新增库存调拨</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_9peeabpfbrf.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" href="css/caiStyle.css" />
		<link rel="stylesheet" href="css/dingdan.css" />
	</head>
	<style type="text/css">
		.layui-table-header .layui-table-cell{
			padding: 0 5px;
		}
		
		.layui-table-body .layui-table-cell{
			padding: 0 5px;
			height: 40px;
			line-height: 40px;
		}
		
		.goodsImg {
		    width: 40px;
		    height: 40px;
		    background: no-repeat center center;
		    background-size: cover;
		}
		
		.addOrder{
			height: 500px;
			overflow-y: auto;
			font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
		}
		
		.add-btn{
			position: fixed;
			bottom: 50px;
			width: 100%;
			text-align: center;
		}
		
		.yingfujiner{
			border: 1px solid #dddddd;
			padding: 20px 10px;
			margin-top: -20px;
			border-top: 0;
			text-align: right;
		}
		
		.yingfujiner .ff6600{
			font-size: 20px;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<div class="addOrder">
				<form class="layui-form layui-form-pane" action="">
					<div class="mui-col-xs-12 height80 pT20">
						<div class=" flex align-items-center mui-col-xs-5">
							<div><span class="ff6600 mg-right-5 font15">*</span>调出仓</div>
							<div class="mL20 mui-col-xs-8">
								<select name="interest" lay-filter="aihao">
									<option value=""></option>
									<option value="0" selected="">深圳仓</option>
									<option value="1">北京仓</option>
									<option value="2">上海仓</option>
							    </select>
							</div>
						</div>
						<div class="mui-col-xs-4">
							<div class="fo-item-box flex">
								<span class="item-left left mui-col-xs-2 LH40">入库日期</span>
								<div class="item-right"><input type="text" class="layui-input mui-col-xs-10" id="jiaohuo" placeholder="yyyy-MM-dd HH:mm:ss"></div>
							</div>
						</div>
					</div>
					<div class="mui-col-xs-12 mB20">
						<div class=" flex align-items-center mui-col-xs-5">
							<div><span class="ff6600 mg-right-5 font15">*</span>调入仓</div>
							<div class="mL20 mui-col-xs-8">
								<select name="interest" lay-filter="aihao">
									<option value=""></option>
									<option value="0" selected="">深圳仓</option>
									<option value="1">北京仓</option>
									<option value="2">上海仓</option>
							    </select>
							</div>
						</div>
					</div>
					<div class="add-body">
						<table class="table table-bordered table-hover">
							<thead class="theads">
								<tr>
									<td style="width: 4%;"></td>
									<td style="width: 4%;"></td>
									<td style="width: 4%;">主图</td>
									<td style="width: 15%;">商品编码</td>
									<td style="width: 15%;">商品名称</td>
									<td style="width: 15%;">商品规格</td>
									<td style="width: 7%;">数量</td>
									<td style="width: 7%;">单位</td>
									<!--<td style="width: 7%;" class="text-right">单价</td>
									<td style="width: 7%;" class="text-right">小计</td>-->
									<td style="width: 10%;" class="text-center">备注</td>
								</tr>
							</thead>
							<tbody class="list-item-table">
								<tr class="tr-item" v-for="(item, index) in goodsList" :key="index">
									<td class="text-center">{{index+1}}</td>
									<td class="text-center"><span @click="subtract(index)" class="iconfont icon-jian"></span></td>
									<td><div class="imgbox"><img :src="item.picture" ></div></td>
									<td>{{item.coding}}</td>
									<td class="goodsName">{{item.name}}</td>
									<td class="goodsName">{{item.specification}}</td>
									<td class="text-center"><input  @keyup="contMin(index,item.unitPrice,item.quantity)" type="text" v-model="item.quantity" /></td>
									<td>{{item.unit}}</td>
									<!--<td>{{item.unitPrice}}</td>-->
									<!--<td class="text-right">{{item.subtotal}}</td>-->
									<td style="line-height: 1.2;font-size: 12px;"><i @click="handlEdit(index,item.comment)" class="iconfont icon-xiewenzhang"></i>{{item.comment}}</td>
								</tr>
								<tr class="tr-item addRow">
									<td  class="text-center"></td>
									<td class="text-center"><span @click="showAddRow" class="iconfont icon-jia"></span></td>
									<td @click="showAddRow" style="background: #fbfbfb;" colspan="3">选择商品 <i class="iconfont icon-diandian pull-right"></i></td>
									<td></td>
									<td class="text-center"></td>
									<td></td>
									<!--<td></td>-->
									<td class="text-right"></td>
									<!--<td></td>-->
								</tr>
							</tbody>
						</table>
					</div>
					<div class="add-btn">
						<button class="cancel" type="button">取消</button>
						<button class="confirm" type="button">保存</button>
					</div>
					<div>
				<div class="sm-box1 gs-box">
					<form class="layui-form">
						<div class="gs-box-item">
							<div class="form-box form-box1">
								<div class="col-md-4 padding-0">
									<div class="fb-box"><span class="mui-col-xs-2">调拨单号:</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class=" mui-col-xs-2">备注:</span><textarea class="spark_text"></textarea></div>
								</div>
								<div class="col-md-4 padding-0 mL40">
									<div class="fb-box"><span class="mui-col-xs-2">经办人:</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class=" mui-col-xs-2">制单人:</span><input type="text" class="form-controls" name="" id="" value="陈经理" disabled=""/></div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
				</form>
				
			</div>
			
			<!-- 选择商品 -->
			<div class="addModel hidden">
				<div class="add-h">
					<div>选择商品</div>
					<div @click="showChangeClass($event)" :class="{show:show}" class="changeClass"><div>{{changeClassTitle}} <i class="iconfont icon-xiangshangjiantouarrowup-copy"></i></div>
						<div id="test13" class="demo-tree-more"></div>
					</div>
				</div>
				<div class="add-b">
					<table id="goodsList" lay-filter="goodsList"></table>
				</div>
				<div class="add-f">
					<button @click="closeRow" type="button" class="cancel">取消</button>
					<button @click="addRow" type="button" class="confirm">确定</button>
				</div>
			</div>
			
			<!-- 发票类型 -->
			<!-- 收货信息弹出层 -->
		</div>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				console.log(height);
				$(".container-fluid").css({"height":(height-34)+"px"})
				$(".addOrder").css({"height":(height-90)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".addOrder").css({"height":(height-90)+"px"})
			})
			
			layui.use(['form','table', 'layedit', 'laydate','tree'], function(){
				var form = layui.form,
					tree = layui.tree,
					table = layui.table,
				    layer = layui.layer,
				    layedit = layui.layedit,
				    laydate = layui.laydate;
					
					
				//分类模拟数据1
				var data1 = [{
					title: '手机数码'
					,id: 1
					,children: [{
						title: '手机'
						,id: 1000
						,children: [{
							title: '游戏手机'
							,id: 10001
				    },{
						title: '拍照手机'
						,id: 10002
					},{
						title: '全面屏手机'
						,id: 10003
					},{
						title: '对讲机'
						,id: 10004
					}]
					},{
					    title: '摄影摄像'
					    ,id: 1001
					    ,children:[{
						    title: '单反相机'
							,id: 10011
						  },
						  {
						    title: '数码相机'
							,id: 10012
						}]
					}]
				},{
					title: '电脑办公'
					,id: 2
					,children: [{
						title: '电脑整机'
						,id: 2000
					},{
						title: '笔记本'
						,id: 2001
					},
					{
						title: '台式机'
						,id: 2002
					}]
				},{
					title: '家用电器'
					,id: 3
					,children: [{
						title: '超薄电视'
						,id: 3000
					},{
						title: '全面屏电视'
						,id: 3001
					}]
				}]
				  
				//选择商品分类下拉列表	
				tree.render({
				    elem: '#test13'
				    ,data: data1
				    ,showLine: false  //是否开启连接线
					,click: function(obj){
					    layer.msg(JSON.stringify(obj.data));
						vm.changeClassTitle = obj.data.title;
					}
				});
				
				
				//交货日期时间选择
				laydate.render({
				    elem: '#jiaohuo'
				    ,type: 'datetime'
				});
				
				
				// 数据列表渲染
				table.render({
					elem: '#goodsList'
					,data:DataArray2// data为数据库查到的数据
					,height: 450
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{type:'checkbox'}
						,{field:'mtype',align:"center",event: 'barDemo', width:50, title: '主图',templet:function(e){return '<div class="goodsImg" style="background-image: url('+ e.mtype +');"></div>'}}
						,{field:'userid', align:"center",width:165, title: '商品编码'}
						,{field:'uname', align:"center",width:165, title: '商品名称'}
						,{field:'sex',align:"center", width:150, title: '商品规格',}
						,{field:'rank',align:"center", width:90, title: '分类名称'}
						,{field:'scores',align:"center",width:80, title: '起订量'}
						,{field:'exptime',align:"center", width:70, title: '库存'}
						,{field:'money',align:"center", width:70, title: '预购'}
						,{field:'email',align:"center", width:70, title: '价格'}
						,{field:'scores',align:"center", edit: 'text', width:90, title: '下单数量'}
						,{field:'uptime',align:"center", width:70, title: '单位'}
					]]
					,page: true
				});
				
				//监听单元格下单数量编辑
				table.on('edit(goodsList)', function(obj){
				   console.log(obj);
				});
				
				//获取选中行的数据(商品选择)
				table.on('checkbox(goodsList)', function(obj){
					vm.changeList = table.checkStatus('goodsList').data
					console.log(vm.changeList);
				});
			})
			
			let province = cityData3[0].text
			let city = cityData3[0].children[0].text;
			let region = cityData3[0].children[0].children[0].text;
			var vm = new Vue({
				el:".container-fluid",
				data:{
					faBiaoMode:true,
					FaBiao:0,
					changeClassTitle:"全部分类",
//					subtotal:"178.20",
					show:false,
					showAddRowModel:false,
					changeList:[],
					goodsList:[
						{
							picture:"img/001.png",
							coding:"0987323456731345678",
							name:"【打折】 莎拉公主 奥地利水晶项链 天使泪水晶项链",
							specification:"	材质：水晶，颜色：橄榄绿",
							quantity:"1",
							unit:"件",
							unitPrice:"178.20",
							comment:"无"
						}
					],
					showCity:false,//是否显示选择城市弹出层
					editIndex:-1,
					changeAdrJson:{},
				},
				created() {
					this.province = cityData3
					this.city = cityData3[0].children
					this.region = cityData3[0].children[0].children
				},
				methods:{
					hiddenFaBiao(){//隐藏发票类型弹出层
						this.faBiaoMode = true;
					},
					showFaBiaoModel(){//显示发票类型弹出层
						this.faBiaoMode = false;
					},
					changeFaBiao(e){
						console.log(this.FaBiao);
					},
					showChangeClass(){//选择商品分类
						if(this.show){
							setTimeout(()=>{
								this.show = false;
							},500)
						}else{
							this.show = true;
						}
					},
					handlEdit(item,comment){//给已添加商品写备注
						layer.prompt({title: '添加商品备注',value:comment, formType: 2}, (text, index)=>{
							layer.close(index);
							this.goodsList[item].comment = text;
						});
					},
					subtract(index){//删除已添加商品
						this.goodsList.splice(index,1)
						this.count()
					},
//					contMin(index,unitPrice,quantity){//输入数量时重新计算小计
//						if(quantity != ""){
//							this.goodsList[index].subtotal = (parseFloat(quantity)*parseFloat(unitPrice)).toFixed(2)
//							this.count();
//						}
//					},
					count(){//统计总金额
//						this.countSum = 0;
//						this.goodsList.forEach(item=>{
//							this.countSum +=parseFloat(item.subtotal)
//						})
					},
					showAddRow(){//显示选择商品弹出层
						$(".addModel").removeClass("hidden")
					},
					closeRow(){//隐藏选择商品弹出层
						$(".addModel").addClass("hiddens")
						setTimeout(function(){
							$(".addModel").removeClass("hiddens")
							$(".addModel").addClass("hidden")
						},300)
					},
					addRow(){//确定添加商品
						for (var i = 0; i < this.changeList.length; i++) {
							this.goodsList.push({
								picture:this.changeList[i].mtype,
								coding:this.changeList[i].userid,
								name:this.changeList[i].uname,
								specification:this.changeList[i].sex,
								quantity:this.changeList[i].scores,
								unit:"件",
								unitPrice:this.changeList[i].email,
//								subtotal:(parseFloat(this.changeList[i].email)*parseFloat(this.changeList[i].scores)).toFixed(2),
								comment:"无"
							})
						}
						
//						this.count()
						this.closeRow()
					}
				}
			})
		</script>
	</body>
</html>
